import { Close, DeleteFilled } from "@element-plus/icons-vue";
import { ElMenu, ElMenuItem, ElIcon, ElMessage, ElMessageBox, ElTabs, ElTabPane } from "element-plus";
import { storeToRefs } from "pinia";
import { defineComponent } from "vue";
import routerStore from "@/stores/routerStore";
import router from "@/router/permission";

import classees from './ActiveRoutes.module.scss'
import { useElMessageBox } from "@Tea/utils";

export default defineComponent({
  setup() {
    const store = routerStore()
    const { deleteActive } = store
    const { activeParent, activeChildList, defaultAvtive } = storeToRefs(store)
    
    // 清除所有标签
    const showClear = () => {
      if (activeChildList.value.length === 0) {
        ElMessage({
          type: 'warning',
          message: '没有可清除的标签',
        })
        return
      }

      useElMessageBox({
        content: '确定要删除所有的标签吗',
        thenCallback: () => {
          const store = routerStore()
          
          store.clearAll()
          ElMessage({
            type: 'success',
            message: '清除成功！',
          })
        }
      })
    }
    
    return () => {
      return (
        <div
          class={classees.activeRoute}
        >
          {/* <ElMenu class={`"el-menu-demo" ${classees.ElMenu}`} mode={'horizontal'} default-active={defaultAvtive.value.name}>
            <ElMenuItem class={classees.elitemSize} onClick={(() => router.push({ name: activeParent.value.name }))} index={activeParent.value.name}>
              {activeParent.value.title}
            </ElMenuItem>
            {activeChildList.value.length != 0 && activeChildList.value.map((el, index) =>
              <ElMenuItem class={`${classees.elitemSize} ${classees.test}`} onClick={() => router.push({ name: el.name })} index={el.name} key={el.name}>
                <span>{el.title}</span>
                <span class={classees.spanIcon}>
                  <el-icon class={`${classees.icon}`} onClick={(e: MouseEvent) => deleteActive(e, index)} size={'11px'} ><Close /></el-icon>
                </span>
              </ElMenuItem>)
            }
          </ElMenu> */}
          <ElTabs
            class={`${classees.ElMenu}`}
            v-model={defaultAvtive.value.name}
          >
            {
              <ElTabPane
                class={`${classees.elitemSize} ${classees.test}`}
                key={activeParent.value.name}
                name={activeParent.value.name}
                v-slots={{
                  label: () => <div style={{ padding: "0 10px",fontWeight:700, fontSize: "13px" }} onClick={() => router.push({ name: activeParent.value.name })}>
                    {activeParent.value.title}
                  </div>
                }}
              >
              </ElTabPane>
            }
            {activeChildList.value.length != 0 && activeChildList.value.map((el, index) =>
              <ElTabPane
                class={`${classees.elitemSize} ${classees.test}`}
                key={el.name}
                name={el.name}
                v-slots={{
                  label: () => (
                    <div
                      style={{ padding: "0 10px", fontSize: "13px" }}
                      onClick={() => router.push({ name: el.name })}
                    >
                      <span>{el.title}</span>
                      <span class={classees.spanIcon}>
                        <el-icon class={`${classees.icon}`} onClick={(e: MouseEvent) => deleteActive(e, index)} size={'11px'} ><Close /></el-icon>
                      </span>
                    </div>)
                }}
              >
              </ElTabPane>
            )}
          </ElTabs>
          <div class={`${classees.clear} allCenter`} onClick={() => showClear()}>
            <ElIcon><DeleteFilled /></ElIcon>
          </div>
        </div>
      )
    }
  }
})